
 axios.interceptors.request.use( 
    (config)=>{ 
  
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
        return config;
    },
    (error)=>{
        return Promise.reject(error)
    }
)
axios.interceptors.response.use( 
    (res)=>{ 
        return res;
    },
    (error)=>{ 

        if( error.response.status == 401 ){
            localStorage.removeItem('token');
            location.href = './login.html';

        }else if( error.response.status == 404 ){
            alert('访问路径有误!');
        }else if( error.response.status == 500 ){
            alert('服务器内部错误!');
        }

        return Promise.reject(error)
    }
) 

var searchBtn = document.querySelector('.search');

var inputEle = document.querySelector('input');

searchBtn.onclick = ()=>{
    axios.get( '/user/search', { params:{ searchkey: inputEle.value , page:1,count:2 }  } ).then((res)=>{
        render( res.data.list )
        console.log(res.data);
    })
}

var tablebody = document.querySelector('.table-body');
tablebody.onclick = (e)=>{
    if( e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu') ){
        axios.post('/user/delete',{ name: e.target.dataset.name }).then((res)=>{
            console.log(res.data);
            render(res.data.list)
        })
    }
}



//渲染列表
function render(data){
    var str = ''
    console.log(data)
    str = data.map((item,index)=>{
        return ` <ul class="row">
        <li>  <input type='checkbox' class='check'></li>
          <li>${item.bh}</li> 
          <li>${item.bm}</li>
          <li>${item.name}</li>
          <li>${item.paixu}</li>
          <li>正常</li>
          <li>${item.shijian}</li>
          <li>
        <span class="iconfont icon-shanchu deleteicon" data-name="${item.name}">删除</span>
          </li>
      </ul>`
    }).join('')

    if( str == '' ){
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
    }
    document.querySelector('.table-body').innerHTML = str ;
}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page:1,count:4 } ,headers:{} } ).then((res)=>{
    render( res.data.list );
    console.log(res.data);
})
var page=1
var shang = document.querySelector(".prev")
var xia = document.querySelector('.next')
shang.onclick = function () {

    if (page > 1) {
        axios.get('/user/list', { params: { page:--page,count:4 }  } ).then((res)=>{
            render( res.data.list );
            console.log(res.data);
        })
    }
    }

    xia.onclick = function () {

        if (page <6) {
            axios.get('/user/list', { params: { page:++page,count:4}  } ).then((res)=>{
                render( res.data.list );
                console.log(res.data);
            })

        }
        }

axios.put()
axios.delete()